<template>
	<view class="index">
		<view class="search-container">
			<uni-search-bar placeholder="搜索商品" bgColor="#EEEEEE" cancelButton="none" radius="15" @click="nav(`/subpackage/goods/pages/search/index`)"/>
		</view>
		<view class="top-bg"></view>
		<view class='i-banner-box'>
			<view class="i-banner" v-if="bannerList.length">
				<swiper class="b-swiper" indicator-dots :autoplay="true" indicator-active-color="#FC3247">
					<swiper-item v-for="(item,i) in bannerList" :key="i" class="swiper-item">
						<view class="s-item">
							<image :src="item.bannerImage" @click="handelTapBanner(item)"/>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="i-main box-gap">
			<sp-i-block class="i-latest" title="新品推荐" @clickMore="nav(`/subpackage/goods/pages/new/index`)">
				<scroll-view scroll-x>
					<view class="goods-wrap">
						<view class="goods-item" v-for="(g, i) in newList" :key="i">
							<sp-goods-card :goods="g"></sp-goods-card>
						</view>
					</view>
				</scroll-view>
			</sp-i-block>
		</view>
		<view class="i-main box-gap">
			<sp-i-block class="i-latest" title="热门推荐" :is-more="false">
				<scroll-view scroll-x>
					<view class="goods-wrap">
						<view class="goods-item" v-for="(g, i) in hotList" :key="i">
							<sp-goods-card :goods="g"></sp-goods-card>
						</view>
					</view>
				</scroll-view>
			</sp-i-block>
			<view class="loadAllTip" v-if="!isNext">已经到底了~</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
	import { nav } from "@/libs/utils"
	import { ref, onMounted } from "vue";
	import { get, post } from "@/libs/request"
	const bannerList = ref<any[]>([]);
	const hotList = ref<any[]>([]);
	const newList = ref<any[]>([]);
	// 是否新品
    const isNew = ref<any>(0);
    // 是否热销
    const isHot = ref<any>(0);
 	const pageIndex = ref<number>(1);
	const pageSize = ref<number>(10);
	// 是否还有下一页
	const isNext = ref<boolean>(true);
	/**
	 * 获取banner图
	 */
	const getBanner = () => {
		get("banner/getList").then((res : any) => {
			if(res.errCode==0){
				bannerList.value = res.data;
			}
		})
	}
	/**
	 * 点击轮播
	 */
	const handelTapBanner = (row)=>{
		if(row?.bannerLink){
			nav(row.bannerLink);
		}
	}
	/**
	 * 获取商品
	 */
	const getGoodsList = (is_new?: boolean, is_hot?: boolean)=>{
		if(is_new) {
			isNew.value = true;
			isHot.value = null;
			pageSize.value = 50;
		}
		if(is_hot) {
			isNew.value =null;
			isHot.value = true;
			pageSize.value = 10;
		}
		post("goods/paginate",{
			pageIndex: pageIndex.value,
			pageSize: pageSize.value
		},{
			isNew: isNew.value,
			isHot: isHot.value,
		}).then((res)=>{
			if(res.errCode==0){
				if(is_new){
					newList.value = res.data;
				}
				if(is_hot) {
					hotList.value = hotList.value.concat(res.data);+
					pageIndex.value++;
					if(hotList.value.length >= res.page.total){
						isNext.value = false;
					}
				}
			}
		})
	}
	const init = ()=>{
		getBanner();
		getGoodsList(true);
		getGoodsList(false, true);
	}
	//下拉刷新
	onPullDownRefresh(()=>{
		hotList.value = [];
		newList.value = [];
		pageIndex.value = 1;
  		isNext.value = true;
		init();
		uni.stopPullDownRefresh();
	})
	onReachBottom(() => {
		isNext.value &&  getGoodsList(false, true);
	})
	onMounted(() => {
		init();
	})
</script>
<style scoped lang="less">
	.index{
		position: relative;
		min-height: 100vh;
		background: #F8F8F8;
		.box-gap {
			margin-top: 24rpx;
		}
		.search-container {
			position: fixed;
			top: 0;
			z-index: 999;
			width: 100%;
			background: #FC3247;
		}

		.top-bg {
			height: 330rpx;
			background: #FC3247;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 0;
			transform: rotate(180deg);
			border-radius: 50% / 15% 15% 0 0;

			&.default {
				height: 100rpx;
				border-radius: 0;
			}
		}

		.i-banner-box {
			padding: 20rpx 24rpx 0;
			position: relative;
			z-index: 1;
			box-sizing: border-box;

			.i-banner {
				margin-top: 100rpx;

				.b-swiper {
					height: 400rpx;
					border-radius: 20rpx !important;
					overflow: hidden;

					.swiper-item {
						border-radius: 20rpx !important;
					}
				}

				image {
					width: 100%;
					height: 400rpx;
				}
			}
		}
		.goods-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 24rpx;

			.goods-item {
				width: 346rpx;
				margin-bottom: 20rpx;
			}

			:deep(.goods-card--col .goods-card-cover) {
				width: 100%;
				height: 320rpx;
				border-radius: 15rpx;
				margin: 0;
			}
		}
		.loadAllTip{
			text-align:center;
			padding: 0 0;
			font-size: 26rpx;
			color:#666;
		}
	}
</style>